<template>
  <el-dialog :visible.sync="dialogEditVisible" :class="{'mobile-page-dialog':showMobilePage}" :close-on-click-modal="false" class="small-common-dialog-size" @close="closeDialog">
    <Title title="编辑标签" />
    <div class="edit-main">
      <TagSelect ref="tagSelectRef" v-model="tags" :collapse-tags="false" :module-type="moduleType" class="width100" @setTagTreeList="setTagTreeList" />
    </div>
    <div class="edit-dialog-btn">
      <el-button :loading="loading" type="primary" size="small" @click="edit()">保存</el-button>
      <el-button type="info" size="small" class="cancel-btn-style" @click="closeDialog">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Title from '@/components/Title';
import TagSelect from '@/components/Common/tagSelect';

export default {
  components: { TagSelect, Title },
  props: {
    editTagApi: {
      type: Function,
      default: null
    },
    extendParams: {
      type: Object,
      default: null
    },
    moduleType: {
      type: Number,
      default: 1
    },
    showMobilePage: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogEditVisible: false,
      tags: [],
      loading: false,
      tagIdList: []
    };
  },
  methods: {
    openDialog(tags) {
      try {
        this.tags = tags ? JSON.parse(JSON.stringify(tags)) : [];
        this.cascaderSoft(this.tags, [], { childKey: 'item' });
      } catch (error) {
        this.tags = [];
      }
      this.dialogEditVisible = true;
    },
    setTagTreeList(tagList) {
      this.cascaderSoft(this.tags, tagList, { childKey: 'item' });
    },
    closeDialog() {
      this.dialogEditVisible = false;
      this.tags = [];
    },
    edit() {
      if (!this.editTagApi) return;
      const params = this.extendParams || {};
      params.tag = this.tags;
      this.loading = true;
      this.editTagApi(params).then(res => {
        this.loading = false;
        if (res.code === 200) {
          this.$emit('callback');
          this.closeDialog();
        } else {
          this.$message.error(res.message);
        }
      }).catch(() => {
        this.loading = false;
      });
    },
    cascaderSoft(value, list, { childKey = 'children' }) {
      if (!value || !list) return [];
      let idList = [];
      const getId = (item, ans) => {
        if (item.id) {
          ans.push(item.id);
        }
        if (item[childKey] && item[childKey].length) {
          for (let i = 0; i < item[childKey].length; i++) {
            getId(item[childKey][i], ans);
          }
        }
      };
      if (this.tagIdList.length > 0) {
        idList = this.tagIdList;
      } else {
        for (let i = 0; i < list.length; i++) {
          getId(list[i], idList);
        }
      }
      if (idList.length > 0) {
        value.sort((a, b) => {
          const preIndex = idList.indexOf(a.id);
          const curIndex = idList.indexOf(b.id);
          return preIndex - curIndex;
        });
      }
      this.tagIdList = idList;
    }
  }
};
</script>

<style lang="scss" scoped>
.width100 {
  width: 100%;
  & ::v-deep {
    .el-cascader , .el-input__inner {
      width: 100%;
    }
  }
}
.edit-main {
  margin: 16px 0;
}
.edit-dialog-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-page-dialog {
  &::v-deep {
    .el-dialog {
      width: 76% !important;
    }
  }
}
</style>
